import React,{ PureComponent } from "react"
import List from "./component/List"
import Write from "./component/Write"
import Recommend from "./component/Recommend"
import Topic from "./component/Topic"
import {HomeWrapper, HomeLeft, HomeRight, BackTop} from "./style"
import {connect} from "react-redux"
import {actionCreators} from "./store"
class Home extends PureComponent {
    componentDidMount() {
        this.props.getAllData();
        this.bindEvent();
    }
    render() {
        return(
        <HomeWrapper>
            <HomeLeft>
                <img 
                className="banner"
                src="https://seopic.699pic.com/photo/40006/0383.jpg_wh1200.jpg" alt="" />
                <Topic />
                <List />
            </HomeLeft>
            <HomeRight>
                <Recommend />
                <Write />
            </HomeRight>
            {this.props.showScroll?(<BackTop onClick={this.handleScrollTop}>回到顶部</BackTop>):null}
        </HomeWrapper>);
    }
    handleScrollTop() {
        window.scrollTo(0,0);
    }
    bindEvent() {
        window.addEventListener("scroll", this.props.changeScroll)
    }

}
const mapStateToProps = (state) => {
    console.log(state)
    return {
        showScroll: state.getIn(["home", "showScroll"]),
    };
};
const mapDisPatchProps = (dispatch) => {
    return {
        getAllData() {
            dispatch(actionCreators.getAllData());
        },
        changeScroll() {
            if(document.documentElement.scrollTop > 100){
                dispatch(actionCreators.toggleToShow(true))
            }else{
                dispatch(actionCreators.toggleToShow(false))
            }
        }
    };
};
export default connect( mapStateToProps,mapDisPatchProps,null)(Home);